<template>
  <view class="mark-card">
    <view class="mark-card-header" @click="handleLinkClick">
      <view class="mark-card-header-title">
        <view class="mark-card-header-mark" />
        <text v-text="title" />
        <text v-if="subtitle" class="mark-card-header-subtitle" v-text="subtitle"></text>
      </view>
      <view class="mark-card-header-link">
        <text v-text="desc" /><nut-icon v-if="isLink" name="right" size="12" />
      </view>
    </view>
    <view class="mark-card-content">
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts">
export default {
  name: 'MarkCard',
};
</script>
<script setup lang="ts">
import './index.less';
import { PropType } from 'vue';

const props = defineProps({
  title: {
    type: String as PropType<string>,
    default: '',
  },
  subtitle: {
    type: String as PropType<string>,
    default: '',
  },
  isLink: {
    type: Boolean,
    default: false,
  },
  desc: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['link-click']);

const handleLinkClick = () => {
  if (props.isLink) {
    emit('link-click');
  }
};
</script>
